// import "/src/css/antd.css"
import React from 'react';
import { Tree } from 'antd';

import { DownOutlined, FontSizeOutlined, MehOutlined } from '@ant-design/icons';
import PlayAudio from "@site/docs/components/audioPlay/index.js";
import PlayVideo from "../PlayVideo/index"
import b_mp3 from "../../audio/b.mp3";
import d_mp3 from "../../audio/d.mp3";
import g_mp3 from "../../audio/g.mp3";
import k_mp3 from "../../audio/k.mp3";
import p_mp3 from "../../audio/p.mp3";
import t_mp3 from "../../audio/t.mp3";
import f_mp3 from "../../audio/f.mp3";
import v_mp3 from "../../audio/v.mp3";
import h_mp3 from "../../audio/h.mp3";
import θ_mp3 from "../../audio/θ.mp3";
import s_mp3 from "../../audio/s.mp3";
import S_mp3 from "../../audio/大S.mp3";
import z_mp3 from "../../audio/z.mp3";
import a0_mp3 from "../../audio/a0.mp3";
import n3_mp3 from "../../audio/n3.mp3";
import r_mp3 from "../../audio/r.mp3";
import d3_mp3 from "../../audio/d3.mp3";
import tS_mp3 from "../../audio/tS.mp3";
import ts_mp3 from "../../audio/t小s.mp3";
import m_mp3 from "../../audio/m.mp3";
import n_mp3 from "../../audio/n.mp3";
import ng_mp3 from "../../audio/ng.mp3";
import l_mp3 from "../../audio/l.mp3";
import j_mp3 from "../../audio/j.mp3";
import w_mp3 from "../../audio/w.mp3";

import e_mp3 from "../../audio/e.mp3";
import ae_mp3 from "../../audio/ae.mp3";
import i2_mp3 from "../../audio/i2.mp3";
import i_mp3 from "../../audio/i.mp3";
import eee_mp3 from "../../audio/额.mp3";
import e2_mp3 from "../../audio/长e.mp3";

import A_mp3 from "../../audio/A.mp3";
import a2_mp3 from "../../audio/a2.mp3";
import u_mp3 from "../../audio/u.mp3";
import u2_mp3 from "../../audio/u2.mp3";
import ao_mp3 from "../../audio/ao.mp3";
import ao2_mp3 from "../../audio/ao2.mp3";
import ei_mp3 from "../../audio/ei.mp3";
import ai_mp3 from "../../audio/ai.mp3";
import oi_mp3 from "../../audio/oi.mp3";
import eu_mp3 from "../../audio/eu.mp3";
import au_mp3 from "../../audio/au.mp3";
import ie_mp3 from "../../audio/ie.mp3";
import aie_mp3 from "../../audio/aie.mp3";
import uer_mp3 from "../../audio/uer.mp3";


import tr_mp3 from "../../audio/tr.mp3";
import dr_mp3 from "../../audio/dr.mp3";
import dz_mp3 from "../../audio/dz.mp3";

import i_jpg from "../../img/i.jpeg"
import i_gif from "../../img/i.gif"

class Phonetic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultExpandAll: ['0-0-0']
        }
    }


    titleRender = (node) => {
        if ('items' in node) {
            let temp = (<div style={{ display: 'flex', listStyleType: 'none' }}>
                {node.items.map((item, index) => {
                    return <p style={{ minWidth: '50px' }}>
                        <span style={{ fontSize: '1.3em' }}>{item.title}</span>
                        <PlayAudio src={item.audio} id={item.tagId} />
                        {/* <PlayVideo src={node.audio} cover={node.cover} gif={node.gif} /> */}

                    </p>
                })}
            </div>)
            return temp
        }
        return (<div>{node.title}</div>)
    };

    render() {
        return (
            <div>
                <Tree
                    showLine
                    switcherIcon={<DownOutlined />}
                    defaultExpandedKeys={['0-0-0', '0-0-1', '0-0-2', '0-0-3', '0-0-4', '0-0-5', '1-0-0', '1-0-1']}
                    titleRender={this.titleRender}
                    treeData={[
                        {
                            title: '辅音',
                            key: '0-0',
                            children: [
                                {
                                    title: '爆破音',
                                    key: '0-0-0',
                                    children: [
                                        {
                                            key: '0-0-0-0',
                                            items: [
                                                {
                                                    title: 'p',
                                                    key: 'p',
                                                    audio: p_mp3,
                                                    cover: i_jpg,
                                                    gif: i_gif,
                                                    tagId: 'p'
                                                },
                                                {
                                                    title: 't',
                                                    key: 't',
                                                    audio: t_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 't'
                                                },
                                                {
                                                    title: 'k',
                                                    key: 'k',
                                                    audio: k_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'k'
                                                },
                                            ]
                                        },
                                        {
                                            key: '1-0-0-2dfs',
                                            items: [
                                                {
                                                    title: 'b',
                                                    key: 'b',
                                                    audio: b_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'b'
                                                },
                                                {
                                                    title: 'd',
                                                    key: 'd',
                                                    audio: d_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'd'
                                                },
                                                {
                                                    title: 'g',
                                                    key: '0-0-0-2',
                                                    audio: g_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'g'
                                                },
                                            ]
                                        },

                                    ],
                                },
                                {
                                    title: '摩擦音',
                                    key: '0-0-1',
                                    children: [
                                        {
                                            key: '802048',
                                            items: [
                                                {
                                                    title: 'f',
                                                    key: '0-0-1-0',
                                                    audio: f_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'f'
                                                },
                                                {
                                                    title: 's',
                                                    key: '0-0-1-2',
                                                    audio: s_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 's'
                                                },
                                                {
                                                    title: 'θ',
                                                    key: '0-0-1-1',
                                                    audio: θ_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'θ'
                                                }, {
                                                    title: '∫',
                                                    key: '0-0-1-3',
                                                    audio: S_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'S_mp3'
                                                }, {
                                                    title: 'h',
                                                    key: '0-0-1-4',
                                                    audio: h_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'h'
                                                },
                                            ]
                                        },
                                        {
                                            key: '80231048',
                                            items: [
                                                {
                                                    title: 'v',
                                                    key: '0-0-1-5',
                                                    audio: v_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'v'
                                                },
                                                {
                                                    title: 'z',
                                                    key: '0-0-1-6',
                                                    audio: z_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'z'
                                                },
                                                {
                                                    title: 'ð',
                                                    key: '0-0-1-7',
                                                    audio: a0_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'a8098'
                                                },
                                                {
                                                    title: 'ʒ',
                                                    key: '0-0-1-8',
                                                    audio: n3_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'a-0-0-1-8'
                                                },
                                                {
                                                    title: 'r',
                                                    key: '0-0-1-9',
                                                    audio: r_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'r'
                                                },
                                            ]
                                        },
                                    ],
                                },
                                {
                                    title: '破擦音',
                                    key: '0-0-2',
                                    children: [
                                        {
                                            key: '213123',
                                            items: [
                                                {
                                                    title: 't∫',
                                                    key: '0-0-2-0',
                                                    audio: tS_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'TS80'
                                                },
                                                {
                                                    title: 'tr',
                                                    key: '0-0-2-1',
                                                    audio: tr_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'tr'
                                                },
                                                {
                                                    title: 'ts',
                                                    key: '0-0-2-2',
                                                    audio: ts_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ts'
                                                },
                                            ]
                                        },
                                        {
                                            key: '87688',
                                            items: [
                                                {
                                                    title: 'dʒ',
                                                    key: '0-0-2-3',
                                                    audio: d3_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'd3'
                                                },
                                                {
                                                    title: 'dr',
                                                    key: '0-0-2-4',
                                                    audio: dr_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'dr'
                                                },
                                                {
                                                    title: 'dz',
                                                    key: '0-0-2-5',
                                                    audio: dz_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'dz'
                                                },
                                            ]
                                        },


                                    ],
                                },
                                {
                                    title: '鼻音',
                                    key: '0-0-3',
                                    children: [
                                        {
                                            key: 'asd09fds',
                                            items: [
                                                {
                                                    title: 'm',
                                                    key: '0-0-3-0',
                                                    audio: m_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'm'
                                                },
                                                {
                                                    title: 'n',
                                                    key: '0-0-3-1',
                                                    audio: n_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ng'
                                                },
                                                {
                                                    title: 'ŋ',
                                                    key: '0-0-3-2',
                                                    audio: ng_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ng'
                                                },
                                            ]
                                        },

                                    ],
                                },
                                {
                                    title: '舌侧音',
                                    key: '0-0-4',
                                    children: [
                                        {
                                            key: 'fssfa048',
                                            items: [{
                                                title: 'l',
                                                key: '0-0-4-0',
                                                audio: l_mp3,
                                                cover: '',
                                                gif: '',
                                                tagId: 'l'
                                            },]
                                        },

                                    ],
                                },
                                {
                                    title: '半元音',
                                    key: '0-0-5',
                                    children: [
                                        {
                                            key: 'fsa048',
                                            items: [
                                                {
                                                    title: 'j',
                                                    key: '0-0-5-0',
                                                    audio: j_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'j'
                                                },
                                                {
                                                    title: 'w',
                                                    key: '0-0-5-1',
                                                    audio: w_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'w'
                                                },
                                            ]
                                        },

                                    ],
                                },
                            ],
                        },
                        {
                            title: '元音',
                            key: '1-0',
                            children: [
                                {
                                    title: '单元音',
                                    key: '1-0-0',
                                    children: [
                                        {
                                            key: '4234',
                                            items: [
                                                {
                                                    title: 'ʌ',
                                                    key: '1-0-0-2',
                                                    audio: A_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'A'
                                                },
                                                {
                                                    title: 'a:',
                                                    key: '1-0-0-a2',
                                                    audio: a2_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'a2'
                                                },
                                                {
                                                    title: 'ɔ',
                                                    key: '1-0-0-5',
                                                    audio: ao_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ao'
                                                },
                                                {
                                                    title: 'ɔ:',
                                                    key: '1-0-0-6',
                                                    audio: ao2_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ao2'
                                                },
                                                {
                                                    title: 'ə',
                                                    key: '1-0-0-eee',
                                                    audio: eee_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'eee'
                                                },
                                                {
                                                    title: 'ə:',
                                                    key: '1-0-0-e2222',
                                                    audio: e2_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'e222'
                                                },
                                                {
                                                    title: 'i:',
                                                    key: '1-0-0-i2',
                                                    audio: i2_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'i2'
                                                },
                                                {
                                                    title: 'i',
                                                    key: '1-0-0-i',
                                                    audio: i_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'i'
                                                },
                                                {
                                                    title: 'e',
                                                    key: '1-0-0-0',
                                                    audio: e_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'e'
                                                },
                                                {
                                                    title: 'æ',
                                                    key: '1-0-0-1',
                                                    audio: ae_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ae'
                                                },


                                                {
                                                    title: 'u',
                                                    key: '1-0-0-3',
                                                    audio: u_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'u'
                                                },
                                                {
                                                    title: 'u:',
                                                    key: '1-0-0-4',
                                                    audio: u2_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'u2'
                                                },
                                              
                                            ]
                                        },

                                    ],
                                },
                                {
                                    title: '双元音',
                                    key: '1-0-1',
                                    children: [
                                        {
                                            key: '5654634',
                                            items: [
                                                {
                                                    title: 'ai',
                                                    key: '1-0-1-0',
                                                    audio: ai_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ai'
                                                },
                                                {
                                                    title: 'ei',
                                                    key: '1-0-1-1',
                                                    audio: ei_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ei'
                                                },

                                                {
                                                    title: 'ɔi',
                                                    key: '1-0-1-2',
                                                    audio: oi_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'oi'
                                                },
                                                {
                                                    title: 'au',
                                                    key: '1-0-1-3',
                                                    audio: au_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'au'
                                                },
                                                {
                                                    title: 'əu',
                                                    key: '1-0-1-4',
                                                    audio: eu_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'eu'
                                                },
                                                {
                                                    title: 'iə',
                                                    key: '1-0-1-5',
                                                    audio: ie_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'ie'
                                                },
                                                {
                                                    title: 'ɛə',
                                                    key: '1-0-1-6',
                                                    audio: aie_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'aie'
                                                },
                                                {
                                                    title: 'uə',
                                                    key: '1-0-1-7',
                                                    audio: uer_mp3,
                                                    cover: '',
                                                    gif: '',
                                                    tagId: 'uer'
                                                },
                                            ]
                                        },

                                    ],
                                },
                            ],
                        },
                    ]}
                />
            </div>

        );
    }
}

export default Phonetic;